<template>
	<view style="width: 750rpx;overflow: hidden;">
		<view style="height: 88rpx;width: 750rpx;background-color: #3775f6;"></view>
		<image src="../../static/image/img_bg_baodanxiangqing@2x.png"
			style="width:750rpx;height: 526rpx;position: absolute;z-index:-1;"></image>
		<view class="main">
			<view class="main-item">
				<view class="main-item-title">
					众安保险卓越守护
				</view>
				<view class="main-item-text">
					老年人综合意外险
				</view>
				<view class="main-item-text">
					<text style="margin-right: 30rpx;">保额版本</text>
					<text>300万保额</text>
				</view>
				<view class="main-item-text">
					<text style="margin-right: 30rpx;">起止日期</text>
					<text>2019-06-19 &nbsp;至 &nbsp;2020-06-19</text>
				</view>
			</view>
			
			<view class="main-item-cont">
				<view class="main-item-cont-top"></view>
				<view class="main-item-cont-btm">
					<view class="main-item-text" style="margin-bottom: 24rpx;">保障内容</view>
					<view class="cont-btm-text" v-for="item in contlist" :key="item.name">
						<view class="cont-btm-text-left">
							{{item.name}}
						</view>
						<view class="cont-btm-text-left">
							{{item.price}}
						</view>
					</view>
				</view>
			</view> 
			
			<view class="main-item-cont">
				<view class="main-item-cont-top"></view>
				<view class="main-item-cont-btm">
					<view class="cont-btm-name">被保人</view>
					<view style="font-size: 24rpx;">
						<view style="color: #717171;">
							姚磊磊
						</view>
						<view style="#2e3033">
							351235123651
						</view>
					</view>
				</view>
			</view>
			
			<view class="main-item-cont">
				<view class="main-item-cont-top"></view>
				<view class="main-item-cont-btm">
					<view class="cont-btm-name">投保人</view>
					<view style="font-size: 24rpx;">
						<view style="color: #717171;">
							姚磊磊
						</view>
						<view style="#2e3033">
							351235123651
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contlist:[
					{
						name:"意外身故保险金",
						price:"5万"
					},
					{
						name:"意外身残保险金",
						price:"10万"
					},
					{
						name:"意外医疗",
						price:"5万"
					},
					{
						name:"意外住院津贴",
						price:"60元/天"
					},
					{
						name:"意外救护车费用补偿",
						price:"200万"
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>

	.main {
		width: 670rpx;
		min-height: 20rpx;
		margin: 0 auto;
		margin-top: 270rpx;
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
	}

	.main-item {
		width: 670rpx;
		height: 264rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(255, 225, 225, 0.5);
		border-radius: 12rpx;
		padding: 32rpx;
	}

	.main-item-title {
		width: 234rpx;
		height: 38rpx;
		line-height: 38rpx;
		text-align: center;
		background-color: #5389fa;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #fff;
		margin-bottom: 16rpx;
	}

	.main-item-text {
		margin: 8rpx 0rpx;
		font-size: 32rpx;
	}

	.main-item-cont{
		margin-top: 24rpx;
	}
	.main-item-cont-top {
		width: 670rpx;
		height: 12rpx;
		background-color: #3775f6;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
	}

	.main-item-cont-btm {
		padding: 32rpx;
		width: 670rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(255, 225, 225, 0.5);
	}
	.cont-btm-text{
		display: flex;
		margin-bottom:16rpx;
		justify-content: space-between;
	}
	.cont-btm-text-left{
		font-size: 24rpx;
		color: #676767;
	}
	.cont-btm-text-right{
		font-size: 20rpx;
		color: #bcc2cc;
	}
	.cont-btm-name{
		padding: 12rpx 0rpx;
		font-size: 32rpx;
		color: #2e3033;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #BCC2CC;
	}
</style>
